<template>
  <div class="outmain ba_f">
    <div class="ba_f">
      <el-tabs v-model="activeName3" type="card" @tab-click="handleClick3">
        <el-tab-pane label="预约订单" name="storeappointmentlist"></el-tab-pane>
        <el-tab-pane label="全部订单" name="storeappointmentorder"></el-tab-pane>
        <el-tab-pane label="预约设置" name="storeappointmentstoreset"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="shuju_title mar_b20 mar_t20">
      <div class="shuju_title_text">
        <span>全部订单</span>
      </div>
    </div>
    <div class="">
      <el-form :inline="false" :model="form" class="demo-form-inline" label-width="130px">
        <div>
          <el-form-item label="关键字搜索">
            <el-input v-model="form.keyword" size="medium" placeholder="请输入订单号/联系人/电话/核销码" @input="selectType"></el-input>
          </el-form-item>
        </div>
        <div class="flex ba_f" v-if="!day">
          <el-form-item label="查询日期：">
            <div class="flex-bet">
              <div>
                <el-radio-group v-model="form.timeType" @change="selectType">
                  <el-radio-button label="1">今天</el-radio-button>
                  <el-radio-button label="2">近七天</el-radio-button>
                  <el-radio-button label="3">近十五天</el-radio-button>
                  <el-radio-button label="4">自定义时间</el-radio-button>
                </el-radio-group>
                <span class="mar_l20" v-if="form.timeType=='4'">
                  <el-date-picker v-model="form.time" type="daterange" range-separator="至" start-placeholder="开始日期"
                                  end-placeholder="结束日期" format="yyyy年MM月dd日" @change="selectType"></el-date-picker>
                </span>
              </div>
            </div>
          </el-form-item>
        </div>
        <div v-if="day">
          <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
            <template v-for="item in areaList">
              <el-tab-pane :label="item.name" :name="item.id">
                <template slot="label">{{item.name}}<el-badge :value="item.orderNum"></el-badge></template>
              </el-tab-pane>
            </template>
          </el-tabs>
        </div>
      </el-form>
    </div>
    <div class="mar_t20">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="待确认/已确认" name="1"></el-tab-pane>
        <el-tab-pane label="已取消/已拒绝" name="2"></el-tab-pane>
        <el-tab-pane label="已完成" name="3"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="tabledata tableys">
      <el-table :data="list" v-loading="listLoading" :element-loading-text="elementLoadingText" stripe style="width: 100%">
        <el-table-column type="selection"></el-table-column>
        <el-table-column  label="用户信息" width='300'>
          <template slot-scope="scope">
            <div class="flex">
              <div class="flex-col t_l">
                <div>联系人：{{ scope.row.userName }}（{{ scope.row.sex }}）</div>
                <div>预留电话：{{ scope.row.userTel }}</div>
<!--                <div class="overflowlnr">昵称：{{ scope.row.userName }}（UID：{{ scope.row.userId }}）</div>-->
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="预约信息" width='280'>
          <template slot-scope="scope">
            <div class="flex">
              <div class="flex-col t_l">
                <div>预约位置：{{ scope.row.regionName }}</div>
                <div>就餐人数：{{ scope.row.people }}人</div>
                <div>到店时间：<span class="color-red">{{ scope.row.serviceDay }} {{ scope.row.serviceTime }}</span></div>
<!--                <div>预约定金：<span class="color-green">{{ scope.row.money }}</span></div>-->
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="payMode" label="预付定金" >
          <template slot-scope="scope">
            <div><span class="color-green" v-if="scope.row.money>0">{{ scope.row.money }}</span></div>
            <div v-if="scope.row.payMode=='1'">微信支付</div>
            <div v-if="scope.row.payMode=='2'">支付宝支付</div>
            <div v-if="scope.row.payMode=='3'">百度支付</div>
            <div v-if="scope.row.payMode=='4'">微信支付</div>
            <div v-if="scope.row.payMode=='5'">余额支付</div>
            <div v-if="scope.row.payMode=='0'">--</div>
          </template>
        </el-table-column>
        <el-table-column  label="订单信息" width='240'>
          <template slot-scope="scope">
            <div>
              <span>{{scope.row.outTradeNo}}</span>
            </div>
            <div>{{scope.row.createdAt}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="note" label="订单备注" ></el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <div class="flex">
              <el-button size="mini" type="success" v-if="scope.row.state=='2'" @click="operat(scope.row.id,'adopt')">预约通过</el-button>
              <el-button size="mini" type="danger" v-if="scope.row.state=='2'" @click="operat(scope.row.id,'reject')">
                <span v-if="scope.row.money>0">预约拒绝并退款</span>
                <span v-else>预约拒绝</span>
              </el-button>
              <el-button type="primary" size="mini" @click="operat(scope.row.id,'confirmArrival')" class="blue2" v-if="scope.row.state=='3'">确认到店</el-button>
            </div>
            <span style="color:#F56C6C" v-show="scope.row.state=='4'"><el-tag type="danger" size="mini">已拒绝</el-tag></span>
            <span style="color:#909399" v-show="scope.row.state=='6'"><el-tag type="info" size="mini">已取消</el-tag></span>
            <span style="color:#67C23A" v-show="scope.row.state=='5'"><el-tag type="success" size="mini">已核销</el-tag></span>
          </template>
        </el-table-column>
        <el-table-column label="查看详情" width="120">
          <template slot-scope="scope">
            <div class="flex">
              <el-button size="mini" type="text" @click="handleEdit2(scope.row)">查看详情</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
      <edit ref="edit" @fetchData="fetchData"></edit>
    </div>
  </div>
</template>
<script>
import {yyOrderList, operationAppointment} from '@/api/plug';
import {getArea, getTableOrder} from "@/api/instore";
import Edit from "../../../plugin/appointment/components/edit";
import {mapState} from 'vuex'
import {changeDate} from "@/utils";
export default {
  components: {Edit},
  created() {
    if (this.$route.query.day) {
      this.day = this.$route.query.day;
      this.fetchData2();
    }
    this.fetchData();
  },
  computed: {
    ...mapState(['storeId']),
  },
  data() {
    return {
      activeName3:'storeappointmentorder',
      form: {
        keyword: '',
        timeType: '1',
        time: [new Date(), new Date()],
      },
      list: [],
      listLoading: false,
      activeName:'0',
      selectRows: '',
      elementLoadingText: '正在加载...',
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      },
      areaList:[],
      day:'',
      activeName2:'',
    };
  },
  methods: {
    handleClick3() {
      if (this.activeName3 == 'storeappointmentlist') {
        this.$router.push({path: 'storeappointmentlist'});
      } else if (this.activeName3 == 'storeappointmentorder') {
        this.$router.push({path: 'storeappointmentorder'});
      }else if (this.activeName3 == 'storeappointmentstoreset') {
        this.$router.push({path: 'storeappointmentstoreset'});
      }
    },
    async fetchData() {
      this.listLoading = true;
      var params = {
        page: this.page.currentPage,
        keyword: this.form.keyword,
        timeType: this.form.timeType,
        startTime: this.form.timeType == '4' && this.form.time ? changeDate(this.form.time[0]).substr(0,10) : '',
        endTime: this.form.timeType == '4' && this.form.time ? changeDate(this.form.time[1]).substr(0,10) : '',
        storeId:this.storeId,
        state:this.activeName,
        day:this.day,
        region:this.activeName2,
      };
      const { data, count } = await yyOrderList(params);
      this.list = data;
      this.page.total = count;
      this.listLoading = false;
    },
    async fetchData2() {
      const {data} = await getArea({orderNum:1,day:this.day,storeId:this.storeId,});
      this.areaList = data?data:[]
      if(data && data[0]){
        // this.areaList.unshift({
        //   id: "0",
        //   name: "全部",
        // })
        this.activeName2 = data ? data[0].id:''
      }
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    selectType() {
      this.fetchData();
    },
    handleEdit2(row) {
      if (row.outTradeNo) {
        this.$refs["edit"].showEdit(row);
      }
    },
    async operat(id, type) {
      if (type == 'adopt') {
        this.$baseConfirm("您确定通过此预约吗？", null, async () => {
          const {msg} = await operationAppointment({id, type,storeId:this.storeId,});
          this.$baseMessage(msg, "success");
          this.fetchData()
        });
      } else if (type == 'reject') {
        this.$baseConfirm("您确定拒绝此预约吗？", null, async () => {
          const {msg} = await operationAppointment({id, type,storeId:this.storeId,});
          this.$baseMessage(msg, "success");
          this.fetchData()
        });
      } else if (type == 'confirmArrival') {
        this.$baseConfirm("您确定此人已到店了吗？", null, async () => {
          const {msg} = await operationAppointment({id, type,storeId:this.storeId,});
          this.$baseMessage(msg, "success");
          this.fetchData()
        });
      }else {
        this.$baseMessage('敬请期待', "success");
        this.fetchData()
      }
    },
    handleClick() {
      this.fetchData();
    },
    record(row) {
      this.$router.push(`/storagerecord?id=${row.id}`);
    },
  }
};
</script>
<style lang="scss" scoped>
.tableys{
  .el-button+.el-button {
    margin-left: 0px;
    margin-right: 10px;
  }
  .el-button{
    margin-right: 10px;
  }
}
</style>
